import tpl from './index.tpl';
import './index.scss';

import { Logo } from './logo';
import tools from '../../utils/tools';
import { Nav } from './nav'
import { Search } from './search'

class Header {
  constructor (el, filedDatas, phoneDatas) {
    this.name = 'header';
    this.$el = el;
    this.logo = new Logo();
    this.filedDatas = filedDatas;
    this.phoneDatas = phoneDatas;
    this.nav = new Nav();
    this.search = new Search();
  }
  async init () {
    await this.render();
    this.bindEvent();
  }
  async render () {
    await this.$el.append(tools.tplReplace(tpl(), {
      logo: this.logo.tpl(),
      nav: this.nav.tpl(this.filedDatas),
      search: this.search.tpl()
    }))
  }
  bindEvent() {
    const $nav = $('.J_nav'),
          $searchBtn = $('.J_searchBtn');
    
    $searchBtn.on('click', this.search.searchPhone)
    $nav.on('mouseenter', '.nav-item', { phoneDatas: this.phoneDatas, nav: this.nav }, this.nav.navMenuMouseIn)
  }
}

export {
  Header
}